<template>
  <div class="home">
    <el-container>
      <el-header
        ><div class="header-top"></div>
        <div class="header-bottom">
          <NavMenu /></div
      ></el-header>
      <el-main>
        <BannerBox />
        <br />
        <NewsCenter />
        <br />
        <AnimationFX />
        <br />
        <ShootingStar />
      </el-main>
      <el-footer></el-footer>
    </el-container>
  </div>
</template>
<script setup lang="ts">
import NavMenu from "./components/NavMenu/index.vue";
import BannerBox from "./components/BannerBox/index.vue";
import NewsCenter from "./components/NewsCenter/index.vue";
import AnimationFX from "./components/AnimationFX/index.vue";
import ShootingStar from "./components/ShootingStar/index.vue";
// import { ref, onMounted, computed } from "vue";
// onMounted(() => {});
</script>
<style lang="less">
.el-carousel__container {
  height: 100%;
  position: relative;
}
.el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
  color: rgba(150, 174, 0, 1);
  background-color: #fff;
}
.el-menu--horizontal > .el-menu-item.is-active {
  border-bottom: 2px solid rgba(150, 174, 0, 1);
  color: rgba(150, 174, 0, 1) !important;
}
.el-menu--horizontal > .el-sub-menu:hover .el-sub-menu__title {
  color: rgba(150, 174, 0, 1);
}
</style>
<style scoped lang="scss">
@import "./app.scss";
</style>
